8<template>
	<view class="container">
		<uni-nav-bar class="navBar" height="60rpx" fixed="true"
			statusBar backgroundColor="transparent" leftWidth="90rpx"
			rightWidth="90rpx" border="false">
			<block slot="left" class="back" >
				<!-- @click="$commonFunc.backPage(1)" -->
				<uni-icons type="back" size="25" color="#fff" @click="openView"></uni-icons>
			</block>
		</uni-nav-bar>
		<!-- 背景图 -->
		<scroll-view style="position: absolute;top: 0;">
			<view>
				<view class="cover-bg" :style="{width:cwidth+'px'}">
				</view>
				<block v-if="userInfo.bacimg">
					<image :src="`${tempUrl}${userInfo.bacimg}`" :style="{width:cwidth+'px'}" class="bg"></image>
				</block>
				<block v-else>
					<image src="../../static/default/default-bacimg.jpg" :style="{width:cwidth+'px'}" class="bg">
					</image>
				</block>
			</view>
			<!-- 个人信息 -->
			<view class="profile-bg">
				<view class="profile-one">
					<block v-if="userInfo.avatar">
						<image :src="`${tempUrl}${userInfo.avatar}`"></image>
					</block>
					<block v-else>
						<image src="../../static/default/default-avatar.png"></image>
					</block>
					<!-- <image :src="`../../static/mode/${userInfo.avatar}`"></image> -->
					<view>
						<text class="name">{{userInfo.name}}</text> <br>
						<text>寻糖号: {{userInfo.uid}}</text> 
						<view style="display: inline-block;" class="sex" v-if="userInfo.sex">
							<text v-if="userInfo.sex==1" style="color:#6495ED;">♂</text>
							<text v-else style="color:#FFC0CB;">♀</text>
						</view>
					</view>
				</view>
				<view class="profile-two" style="white-space:pre-line;">
					{{userInfo.info||''}}
				</view>

				<!-- <view class="tool">
					<view class="sex" v-if="profile.isShowSex && profile.sex!=null">
						<text v-if="profile.sex==1" style="color:#6495ED;">♂</text>
						<text v-else style="color:#FFC0CB;">♀</text>
					</view>
					<view class="wf">

						<view>
							<text>{{profile.watches}}</text> <br>
							关注
						</view>
						<view>
							<text>{{profile.followers}}</text> <br>
							粉丝
						</view>
					</view> -->
					<!-- <view class="tool-btn" @click="$commonFunc.gotoView(editProileUrl)">
						编辑资料
					</view>
					<uni-icons class="btn-icon" type="upload" size="20" color="#fff" @click="open"></uni-icons> -->
				<!-- </view> -->
			</view>
			<!-- </view> -->
			<view class="container-content" id="demo" style="position: sticky;top: 100rpx;z-index: 1;">
				<ms-tabs :list="tabBars" v-model="tabIndex" i temColor="#000" lineColor="#FF7F00" class="tabs">
				</ms-tabs>
				<swiper class="swiper" :current="tabIndex" @change="change">
					<swiper-item class="swiper-item">
						<scroll-view scroll-y @scrolltolower="scrollLower" style="height: 100%;width: 100%;"
							lower-threshold="30">
							<waterFall v-if="dataList.length > 0" :list="dataList" class="waterFall"></waterFall>
						</scroll-view>
					</swiper-item>
					<!-- <swiper-item class="swiper-item">
						<scroll-view scroll-y @scrolltolower="scrollLower" style="height: 100%;width: 100%;"
							lower-threshold="30">
							<waterFall v-if="dataList.length > 0" :list="dataList" class="waterFall"></waterFall>
						</scroll-view>
					</swiper-item> -->
				</swiper>
			</view>
		
		</scroll-view>
		
	</view>
</template>

<script>
	const y1 = [{
			coverImg: '3.jpg',
			title: '杭州除了阿里巴巴还有哪些牛气的公司公司公',
			avatarImg: '4.jpg',
			name: '把我的名字读一遍超级长',
			count: 999,
			type: 1
		},
		{
			coverImg: '2.jpg',
			title: '杭州除了阿里巴巴还有哪些牛气的公司公司公',
			avatarImg: '3.jpg',
			name: '把我的名字读一遍超级长',
			count: 999,
			type: 1
		},
		{
			coverImg: '4.jpg',
			title: '杭州除了阿里巴巴还有哪些牛气的公司公司公',
			avatarImg: '3.jpg',
			name: '把我的名字读一遍超级长',
			count: 999,
			type: 1
		}, {
			coverImg: '3.jpg',
			title: '杭州除了阿里巴巴还有哪些牛气的公司公司公',
			avatarImg: '4.jpg',
			name: '把我的名字读一遍超级长',
			count: 999,
			type: 1
		}, {
			coverImg: '1.jpg',
			title: '杭州除了阿里巴巴还有哪些牛气的公司公司公',
			avatarImg: '3.jpg',
			name: '把我的名字读一遍超级长',
			count: 999,
			type: 1
		}
	]
	import waterFall from '../../components/waterFall/index.vue';
	import {
		getArticle
	} from "../../api/article.js"
	import {getUserById}from "../../api/user.js"
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		baseUrl
	} from "@/common/js/request.js"
	export default {
		components: {
			waterFall
			// profile
		},
		data() {
			return {
				imageURL: '../../static/mode/5.jpg',
				tabIndex: 0,
				cwidth: 0,
				uid:'',
				textVisible: true,
				userInfo:{},
				tempUrl:'',
				dataList: [],
				current: 1,
				size: 5,
				total: 0,
				tabBars: [{
						title: "糖果",
						id: "article",
						order: 0
					},
					// {
					// 	title: "赞过",
					// 	id: "dianzan",
					// 	order: 1,
					// }
				]
			}
		},
		mounted() {
			// 注意，这里要用个变量存this，不然进到getSystemInfo后this指向会变化，找不到data变量
			let _this = this;
			uni.getSystemInfo({
				success: function(res) {
					_this.cwidth = res.windowWidth
				}
			})
		},
		onLoad(options) {
			const item = options.data ? options.data: '';
			this.uid=item;
			this.getData()
			// this.author=item.author
			// this.data=item
			// this.data.imgList=item.imglist.split(',')
			// this.data.createtime=this.data.createtime.slice(0, -3)
		},
		created() {
			this.tempUrl=this.baseUrl
		},
		methods: {
			getData(){
				getUserById({uid:this.uid}).then(res=>{
					if(res.code==200){
						this.userInfo=res.data;
					}
				})
				getArticle({
					uid: this.uid,
					current: this.current,
					size: this.size
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.total = res.data.total;
						this.current = res.data.current;
						this.dataList = [...this.dataList, ...res.data.records]
					}
				})
			},
			scrollLower() {
				if (this.dataList.length < this.total) {
					this.current++;
					this.getData();
				} 
			},
			change(e) {
				const {
					current
				} = e.detail;
				this.tabIndex = current;
			},
			open() {
				uni.showModal({
					title: '',
					confirmColor:'#FF7F00',
					content: '退出登录',
					success: function (res) {
						if (res.confirm) {
							console.log('退出');
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				});
			},
			openView(){
				console.log(1);
				this.$commonFunc.backPage(1)
			}

		}
	}
</script>

<style lang="scss" scoped>
	// .bgClass{
	// 	z-index: -100 !important;
	// }
	// .vadiClass{
	// 	z-index: 1000 !important;
	// }
	.container {
		// width: 100%;
		// height: 100%;
		// overflow-x:hidden;
		position: relative;
	}

	.avatar-bg {
		// overflow-x:hidden;
	}

	.avatar {
		margin: 0 auto 0;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
	}

	.bg {
		overflow-x: hidden;
		height: 700rpx;
		position: absolute;
		top: 0;
		z-index: -10;
	}

	.cover-bg {
		position: absolute;
		top: 0;
		height: 700rpx;
		background-color: #000;
		opacity: 0.3;
		z-index: -1;
	}

	.profile-bg {
		padding: 150rpx 50rpx 80rpx;
		color: white;

		.profile-one {
			display: flex;
			align-items: center;
			font-weight: 200;
			font-size: 25rpx;

			view {
				margin-left: 30rpx;
			}

			.name {
				font-size: 36rpx;
				font-weight: 700;
				letter-spacing: 4rpx;
				line-height: 2.5em;
			}

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}
		}

		.profile-two {
			margin: 10rpx 0;
			width: 660rpx;
			height: 130rpx;
			letter-spacing: 4rpx;
			line-height: 1.5em;
			font-size: 28rpx;
		}

		.sex {
			width: 60rpx;
			height: 45rpx;
			line-height: 45rpx;
			border-radius: 30rpx;
			text-align: center;
			font-weight: bolder;
			background-color: rgba($color: #999, $alpha: 0.5);
		}

		.tool {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 0 auto 20rpx;

			.wf {
				display: flex;
				text-align: center;
				margin: 0 30rpx;
				font-size: 24rpx;
				font-weight: 400;

				view {
					text {
						font-size: 28rpx;
					}

					margin-right: 60rpx;
				}
			}

			.tool-btn {
				border: 2rpx solid white;
				border-radius: 40rpx;
				font-size: 26rpx;
				width: 140rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: rgba($color: #999, $alpha: 0.5);
			}

			.btn-icon {
				border: 2rpx solid white;
				border-radius: 30rpx;
				width: 80rpx;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				background-color: rgba($color: #999, $alpha: 0.5);
				margin-left: 20rpx;
			}

		}

	}

	.container-content {
		margin-top: 30rpx;
		border-top-left-radius: 35rpx;
		border-top-right-radius: 35rpx;
		background-color: #FAFAFA;
		// padding-top: 160rpx;
		// position: sticky;
		// top: 100rpx;
	}

	.swiper {
		overflow-y: auto;
		height: calc(90vh - 40rpx);
	}

	.swiper-item {
		background-color: #FAFAFA;
		padding: 20rpx 0;
	}

	/deep/.tabBlock {
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
	}

	/deep/.tabBlock .tab {
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		display: flex;
		font-size: 30rpx;
		padding-bottom: 15rpx;
		white-space: nowrap;
		border-bottom: 1px #F8F8F8 solid !important;
		color: #ddd !important;
	}

	/deep/.tabBlock .tab__item--active {
		color: #000;
		font-weight: 700;

	}

	/deep/.uni-navbar--border {
		border: unset !important;
	}
</style>
